<template>
  <div class="menu-container">
    <el-card class="menu-tree__card">
      <el-input v-model="filterText" placeholder="请输入内容" class="menu-tree__input">
        <template #suffix>
          <el-icon class="el-input__icon">
            <Search/>
          </el-icon>
        </template>
      </el-input>
      <el-tree
          class="menu-tree"
          ref="treeRef"
          :data="titleData"
          :props="defaultProps"
          :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <span class="tree-node">
            <svg-icon style="font-size: 1vh" :icon-class="data.icon"/> <span>{{ node.label }}</span>
          </span>
        </template>

      </el-tree>
    </el-card>
    <el-card class="menu-tables__card">
      <div class="search">
        <span>菜单名称 </span>
        <el-input placeholder="请输入菜单信息" v-model="menuName"/>
        <el-button class="el-button__primary" type="primary" @click="handleSelectMenu()">
          <template #icon>
            <el-icon>
              <Search/>
            </el-icon>
          </template>
          查询
        </el-button>
        <el-button class="el-button__default" @click="reset()">
          <template #icon>
            <el-icon>
              <Refresh/>
            </el-icon>
          </template>
          重置
        </el-button>
      </div>
      <el-button class="el-button__primary" type="primary" @click="openAddMenuDialog(0)">
        <template #icon>
          <svg-icon icon-class="add"/>
        </template>
       新增
      </el-button>
      <el-table
          row-key="id"
          border
          class="menu-table"
          :header-cell-class-name="'table-header'"
          :cell-class-name="'cell'"
          :data="menuListData"
          highlight-current-row
          default-expand-all
          fit
          v-loading="loading"
      >
        <el-table-column prop="menuName" label="菜单名称" />
        <el-table-column prop="orderNum" label="排序" width="100px">
        </el-table-column>
        <el-table-column prop="icon" label="图标" width="100px" >
          <template #default="scope">
            <svg-icon :icon-class="scope.row.icon"/>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由" />
        <el-table-column prop="component" label="组件路径" width="200px" />
        <el-table-column prop="menuType" label="菜单类型"  width="100px">
          <template #default="scope">
            <el-tag v-if="scope.row.menuType === 'M'" type="success" size="large">目录</el-tag>
            <el-tag v-else-if="scope.row.menuType === 'F'" type="primary" size="large">菜单</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="visible" label="是否显示" width="100px">
          <template #default="scope">
            <el-tag v-if="scope.row.visible === 0" type="primary" size="large">显示</el-tag>
            <el-tag v-else type="info" size="large">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作"  width="250px" >
          <template #default="scope">
            <el-button link size="small" class="menu-table__operator"  @click="openAddMenuDialog(scope.row.id)" :disabled="scope.row.menuType==='F'" v-if="scope.row.path!=='/home'">
              <template #icon>
                <svg-icon icon-class="add"/>
              </template>
              新增
            </el-button>
            <el-button link size="small" class="menu-table__operator" @click="openUpdateMenuDialog(scope.row.id)" v-if="scope.row.path!=='/home'">
              <template #icon>
                <svg-icon icon-class="update"/>
              </template>
              修改
            </el-button>
            <el-button link size="small" class="menu-table__operator" @click="deleteMenu(scope.row.id)"  v-if="scope.row.path!=='/home'">
              <template #icon>
                <svg-icon icon-class="delete"/>
              </template>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <add-menu @refresh="refreshData()"/>
  </div>
</template>
<script setup lang="ts">

import {Refresh, Search} from "@element-plus/icons-vue";
import {onMounted, ref, watch} from "vue";

const treeRef = ref<TreeInstance>()
import SvgIcon from "@/components/SvgIcon/index.vue";
import {ElMessage, ElMessageBox, type TreeInstance} from "element-plus";
import { getMenuList, removeMenu} from "@/api/menu";

import AddMenu from "@/components/menu/addMenu.vue";
import {menuStore} from "@/stores/menu/menuStore.ts";
import type {menuList} from "@/api/menu/types.ts";

const filterText = ref('')
onMounted(() => {
  getMenuData()
  initMenuData()
})
const loading=ref(true)

const menuName = ref('')

const defaultProps = {
  children: 'children',
  label: `menuName`,
  icon: 'icon'
}
const store=menuStore()
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const titleData = ref([] as menuList[])
const menuListData=ref([] as menuList[])


const openAddMenuDialog=(menuId :number) => {
  store.setMenuInsertOpen(true)
  store.setMenuId(menuId)
}
const getMenuData = async () => {
  const res = await getMenuList('')
  titleData.value = res.data
}
const filterNode = (value: string, data: menuList) => {
  if (!value) return true
  return data.menuName?.includes(value)
}

const initMenuData=async ()=>{
  loading.value=true
  const res = await getMenuList(menuName.value)
  menuListData.value = res.data
  loading.value=false
}
/**
 * 打开更新菜单弹窗
 * @param id
 */
const openUpdateMenuDialog=(id:number)=>{
  store.setMenuInsertOpen(true)
  store.setUpdateMenuId(id)
}


/**
 * 删除id
 * @param id
 */
const deleteMenu=(id:number)=>{
  ElMessageBox.confirm(
    '此操作将永久删除该菜单, 是否继续?',
    '提示', {
      app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
      const res = await removeMenu(id)
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功!',
        })
        await initMenuData()
      }
    }).catch(() => {
    })
}

/**
 * 查询菜单信息
 */
const handleSelectMenu=async () => {
  await initMenuData()
}

/**
 * 重置表单
 */
const reset=()=>{
  menuName.value=''
  initMenuData()
}


const refreshData=()=>{
  reset();
  getMenuData();
  store.setUpdateMenuId(0)
  store.setMenuId(0)
}



</script>
<style scoped>

.menu-container {
  width: 100%;
  height: 100%;
  background-color: rgb(245, 245, 245);
  padding: 0;
  display: flex;

  .menu-tree__card {
    width: 13vw;
    box-shadow: none;
    margin: 0 .5vw 0 0;
    display: flex;

    .menu-tree {
      margin-top: 1vh;

      .tree-node {
        font-size: 1.5vh;
      }
    }

    .tree-node.is-focus {
      color: rgb(46, 92, 246);
    }

  }


}
.menu-tables__card {
  flex: 1;
  box-shadow: none;
}
.menu-table {
  margin-top: 10px;
  max-height: 70vh;
  overflow: auto;
}
.search {
  display: flex;
  font-size: 12px;
  margin-bottom: 10px;
}
.search span {
  line-height: 32px;
}
.el-input {
  width: 160px;
  height: 32px;
  font-size: 12px;
  margin: 0 8px;
}

:deep(.el-input__wrapper.is-focus,.el-select__wrapper.is-focus) {
  box-shadow: 0 0 0 1px rgb(46, 92, 246) !important;
}
:deep(.table-header){
  color: #000000;
  font-size: 1.5vh;
  text-align: center;
}
.el-table {
  --el-table-row-hover-bg-color:  rgb(245, 247, 250);
  --el-table-header-bg-color:rgb(245, 247, 250);
}
.el-tag--dark, .el-tag--dark.el-tag--primary{
  --el-tag-bg-color:rgb(46, 92, 246);
  color:#ffffff;
}
.el-tag.el-tag--primary{
  --el-tag-text-color:rgb(46, 92, 246);
}
.el-tag--plain, .el-tag--plain.el-tag--primary{
  --el-tag-border-color:rgb(46, 92, 246);
}
:deep(.cell){
  text-align: center;
  margin: 5px 0;
}
.menu-table__operator{
 color:rgb(46, 92, 246);
  font-size: 14px;
}

.el-button.is-link{
  --el-button-text-color:rgb(46, 92, 246);
  --el-button-disabled-text-color:rgb(150, 173, 250);
  --el-button-active-text-color:rgb(46, 92, 246);
}
.el-button.is-link:not(.is-disabled):active, .el-button.is-link:not(.is-disabled):hover{
  color:rgb(46, 92, 246);
}
</style>